import { Drawer, Button, DrawerProps, Skeleton } from 'antd';

import { RollbackOutlined, CheckOutlined } from '@ant-design/icons';
import {
  FC,
  useMemo,
} from 'react';
import { useNormalMeta } from '@/biz-components/hooks/useMetamodel';
import { createSchemaFormRender } from '@/components/schema-form-render';

interface InteractiveDrawerProps<T = DynamicObjectAny> extends Omit<DrawerProps, 'onClose'> {
  onClose?: () => void;
  onSave?: (value: T) => void;
  metaModelCode: string;
  record?: DynamicObjectAny;
}

const InteractiveDrawer: FC<InteractiveDrawerProps> = ({
  onClose,
  visible,
  metaModelCode,
  ...restProps
}) => {
  const { schema, loading: initLoading } = useNormalMeta(metaModelCode);




  const { Render } = useMemo(() => {
    return createSchemaFormRender();
  }, []);

  const handleRollbackClick = () => {
    onClose?.();
  };

  const handleCheckClick = () => {};

  return (
    <Drawer
      {...restProps}
      closable={false}
      visible={visible}
      footer={
        <div className="page__foot">
          <div className="content__slot__left">
            <Button onClick={handleRollbackClick} icon={<RollbackOutlined />} className="reset-btn">
              取消
            </Button>
          </div>
          <div className="page__foot_right_btns">
            <Button onClick={handleCheckClick} type="primary" icon={<CheckOutlined />}>
              保存配置
            </Button>
          </div>
        </div>
      }
    >
      <Skeleton active loading={initLoading}>
        <Render schema={schema} />
      </Skeleton>
    </Drawer>
  );
};

export default InteractiveDrawer;
